<script setup lang="ts">
    import {reactive, ref,watch} from 'vue';
/**
 * 监视器 watch
 * 语法：
 *  watch(监视哪个值,值改变后的回调函数,{监视的配置})
 */
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
        name: 'zhangsan',
        age: 18,
        job: {
            j1:{
                salary: 20
            },
            j2: "程序员"
        }
    
    })

    // 情况一：监视ref所定义的响应式数据
    /* watch(sum,(newVal,oldValue)=>{
        console.log("sum值变了 " + newVal,oldValue);
    },{immediate:true}) */ // 第三个参数写watch的配置

    // 情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newVal,oldValue)=>{
        console.log("sum或者msg值改变了 ", newVal,oldValue);
    })

    /* 
        情况三: 监视reactive所定义的响应式数据的全部属性 
        注意: 
            1. reactive定义的数据直接拿到watch中，无法拿到正确的oldValue;
            2. 强制开启了深度监视(deep配置无效) 
    */
    // watch(person,(newVal,oldVal)=>{
    //     console.log("person变化了",newVal,oldVal);
    // })

     /* 
        情况四: 监视reactive所定义的响应式数据中的某个属性
        注意:
            此情况必须把第一个参数写成一个函数，该函数返回你要监视的属性；eg: ()=>person.age 监视person中的age  
    */
    watch(()=>person.age,(newVal,oldVal)=>{
        console.log("person的age属性变化了",newVal,oldVal);
    })

    // 情况五: 监视reactive所定义的响应式数据中的某些属性 第一个参数写成一个数组，数组元素是函数，函数返回你要监视的哪些属性
    watch([()=>person.name,()=>person.age],(newVal,oldVal)=>{
        console.log("person的name或age变化了",newVal,oldVal);
    })

    // 特殊情况: 监视reactive所定义的响应式数据中的某个‘对象属性’ 注意: 此情况必须开启深度监视才能监视到深层数据改变
    watch(()=>person.job,(newVal,oldVal)=>{
        console.log("person的job变化了",newVal,oldVal);
    },{deep:true}) // 此处的deep配置有效，但无法正确的拿到oldValue
    
</script>




<template>
    <h2>情况一: 当前求和为{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
    <h2>情况二: {{ msg }}</h2>
    <button @click="msg += '!'">修改信息</button>
    <hr>
    <h2>情况三:</h2>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄: {{ person.age }}</h3>
    <h3>薪资: {{ person.job.j1.salary }}</h3>
    <h3>工作: {{ person.job.j2 }}</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>
    <button @click="person.job.j2 += '@'">修改工作</button>
</template>

<style scoped>

</style>